<template>
    <div class="waterfall" ref="waterfallRef">
        <div v-for="i in props.list">
            <!-- <div class="item">
                <img src="https://picx.zhimg.com/v2-99d9a79c0c6244ffbbe20d063def2b07_r.jpg?source=2c26e567">
                <div class="info">这些属性可能会干扰瀑布流布局的正常排列</div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
const props = defineProps({
    list: {
        type: Number,
        default: 5
    },
    dataList: {
        type: Array,
        default: () => []
    }
})
const waterfallRef = ref(null)
const items = ref([])

onMounted(() => {
    items.value = [...waterfallRef.value.children]
    for (let i = 0; i < props?.dataList.length; i++) {
        items.value[appendItem()].innerHTML = items.value[appendItem()].innerHTML + `
        <div class="item"><img src="${props.dataList[i].url}"><div class="info">${props.dataList[i].info}</div></div>
        `
    }
})
const appendItem = () => {
    let currentIndex = 0
    const array = []
    for (let i = 0; i < items.value.length; i++) {
        currentIndex = i
        // 当前列表
        const childs = items.value[i].children
        if (childs.length === 0) return currentIndex
        // 点前列表的最后一项
        const lastChild = childs[childs.length - 1]
        array.push(lastChild.offsetTop + lastChild.offsetHeight)
    }
    return findMinIndex(array)
}

const findMinIndex = (arr) => {
    const min = Math.min(...arr)
    return arr.indexOf(min)
}
</script>

<style lang="scss">
.waterfall {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    overflow-y: auto;
    padding: 0 10px;

    &::-webkit-scrollbar {
        width: 0;
    }

    >div {
        flex: 1;
        height: 100vh;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        padding: 10px 0;

        >.item {
            overflow: hidden;
            width: 100%;
            box-shadow: 0 0 10px #666666;
            border-radius: 5px;
            position: relative;

            >img {
                width: 100%;
            }

            >.info {
                font-size: 15px;
                color: #666666;
                text-indent: 30px;
                line-height: 25px;
                padding: 10px;
            }
        }
    }
}
</style>